<template>
    <div class="pageWrapper">
        <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="对账日期：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePicker"
                    split-panels
                    transfer
                    placeholder="起始时间"
                    :value="searchData.date"
                    @on-change="createTime"
                ></DatePicker>
            </SearchBarItem>
        </SearchBar>
        <RemoteTable
            :namespace="namespace"
            :columns="columnsData"
            @onSortChange="onSortChange"
        ></RemoteTable>
    </div>
</template>
<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../Module/settlementCollect";
import Authc from "@/components/Authc";
import Tables from "@/components/tables";
import Action from "./Action";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from "@/utils/util";

export default {
    name: "settlementCollect",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Tables,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            isClear: true,
            loading: true,
            modal1: false,
            searchData: {}, //查询条件
            tableData: [],
            columnsData: [
                {
                    title: "对账时间",
                    align: "center",
                    // fixed: "left",
                    children: [
                        {
                            title: "序号",
                            type: "index",
                            align: "center",
                            minWidth: 80,
                            // fixed: "left"
                        },
                        {
                            title: "对账日期",
                            key: "reconciliation_date",
                            align: "center",
                            minWidth: 100,
                            // fixed: "left"
                        }
                    ]
                },
                {
                    title: "平台日汇总",
                    align: "center",
                    children: [
                        {
                            title: "支付总笔数",
                            key: "pay_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "支付总金额(元)",
                            key: "payAmount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.payAmount / 100;
                                return h("span", util.toMoney(item));
                            }
                        },
                        {
                            title: "退款总笔数",
                            key: "refund_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "退款总金额(元)",
                            key: "refundAmount",
                            align: "center",
                            minWidth: 140,
                            render: (h, params) => {
                                let item = Math.abs(params.row.refundAmount / 100);
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        }
                    ]
                },
                {
                    title: "银行日汇总",
                    key: "gender",
                    align: "center",
                    minWidth: 200,
                    children: [
                        {
                            title: "支付总笔数",
                            key: "pay_bk_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "支付总金额(元)",
                            key: "pay_bk_amount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.pay_bk_amount / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        },
                        {
                            title: "退款总笔数",
                            key: "refund_bk_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "退款总金额(元)",
                            key: "refund_bk_amount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = Math.abs(params.row.refund_bk_amount / 100);
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        }
                    ]
                },
                {
                    title: "对账结果",
                    key: "gender",
                    align: "center",
                    minWidth: 200,
                    children: [
                        {
                            title: "差错笔数",
                            key: "fail_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "成功笔数",
                            key: "success_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "已处理笔数",
                            key: "finish_count",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "支付差异金额(元)",
                            key: "diff_pay_amount",
                            align: "center",
                            minWidth: 140,
                            render: (h, params) => {
                                let item = params.row.diff_pay_amount / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        },
                        {
                            title: "退款差异金额(元)",
                            key: "diff_refundAmount",
                            align: "center",
                            minWidth: 140,
                            render: (h, params) => {
                                let item = params.row.diff_refundAmount / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        },
                        {
                            title: "操作",
                            key: "action",
                            align: "center",
                            permissions: ["trade:settlement:cmb"],
                            minWidth: 200,
                            render: function(h, data) {
                                return h(Action, {
                                    props: {
                                        row: data.row
                                    }
                                });
                            }
                        }
                    ]
                }
            ]
        };
    },
    created() {
        /** 重置请求参数, 解决搜索之后，请求参数没有清空的问题 **/
        this.$store.commit(`${namespace}/reviseQuery`);
    },
    methods: {
        handleSearch() {
            this.$store.dispatch(`${namespace}/query`, this.searchData);
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        // 清空事件；
        resetForm() {
            // 测试
            // 清空时间选择
            this.$refs["createDatePicker"].handleClear();
        },
        // 下单时间
        createTime(date, type) {
            this.searchData.reconciliationDateBegin = date ? date[0] : "";
            this.searchData.reconciliationDateEnd = date ? date[1] : "";
        }
    },
    async mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    }
};
</script>
<style scoped></style>
